<template>
  <div class="assessment-system-container">
    <!-- 页面头部区域 -->
    <div class="assessment-header">
      <div class="header-content">
        <div class="ancient-title">考核评估系统</div>
        <div class="header-subtitle">阴曹地府 · 仙官绩效考核与评估</div>
      </div>
      <div class="header-decoration">
        <div class="decoration-line"></div>
        <div class="decoration-symbol">⭐</div>
        <div class="decoration-line"></div>
      </div>
    </div>

    <!-- 路由信息显示 -->
    <div class="route-info">
      <a-breadcrumb>
        <a-breadcrumb-item>
          <router-link to="/management">
            <ApartmentOutlined />
            机构管理
          </router-link>
        </a-breadcrumb-item>
        <a-breadcrumb-item>
          <router-link to="/management/official-position">
            <CrownOutlined />
            仙官职位管理
          </router-link>
        </a-breadcrumb-item>
        <a-breadcrumb-item>
          <StarOutlined />
          {{ $route.meta.title }}
        </a-breadcrumb-item>
      </a-breadcrumb>
    </div>

    <!-- 考核统计卡片 -->
    <div class="stats-section">
      <a-row :gutter="[20, 20]" class="stats-grid">
        <a-col :xs="24" :sm="12" :xl="6">
          <div class="stat-card primary-stat">
            <div class="stat-icon">
              <UserOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-title">本期考核人数</div>
              <div class="stat-value">{{ assessmentStats.currentAssessments }}</div>
              <div class="stat-label">待评估</div>
            </div>
          </div>
        </a-col>

        <a-col :xs="24" :sm="12" :xl="6">
          <div class="stat-card judgment-stat">
            <div class="stat-icon">
              <StarOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-title">优秀率</div>
              <div class="stat-value">{{ assessmentStats.excellentRate }}%</div>
              <div class="stat-label">本期</div>
            </div>
          </div>
        </a-col>

        <a-col :xs="24" :sm="12" :xl="6">
          <div class="stat-card pending-stat">
            <div class="stat-icon">
              <ClockCircleOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-title">进行中</div>
              <div class="stat-value">{{ assessmentStats.ongoingAssessments }}</div>
              <div class="stat-label">考核任务</div>
            </div>
          </div>
        </a-col>

        <a-col :xs="24" :sm="12" :xl="6">
          <div class="stat-card online-stat">
            <div class="stat-icon">
              <CheckCircleOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-title">已完成</div>
              <div class="stat-value">{{ assessmentStats.completedAssessments }}</div>
              <div class="stat-label">本期</div>
            </div>
          </div>
        </a-col>
      </a-row>
    </div>

    <a-row :gutter="24">
      <!-- 左侧：考核任务管理 -->
      <a-col :xs="24" :lg="16">
        <a-card title="考核任务管理" :bordered="false">
          <template #extra>
            <a-space>
              <a-button type="primary" @click="showCreateAssessmentModal">
                <PlusOutlined />
                创建考核
              </a-button>
              <a-button @click="exportAssessments">
                <ExportOutlined />
                导出数据
              </a-button>
            </a-space>
          </template>

          <!-- 筛选区域 -->
          <div class="filter-bar">
            <a-row :gutter="16">
              <a-col :span="6">
                <a-select v-model:value="filterPeriod" placeholder="考核周期" style="width: 100%" allow-clear>
                  <a-select-option value="">全部周期</a-select-option>
                  <a-select-option value="2023-Q4">2023年第四季度</a-select-option>
                  <a-select-option value="2023-Q3">2023年第三季度</a-select-option>
                  <a-select-option value="2023-Q2">2023年第二季度</a-select-option>
                </a-select>
              </a-col>
              <a-col :span="6">
                <a-select v-model:value="filterStatus" placeholder="考核状态" style="width: 100%" allow-clear>
                  <a-select-option value="">全部状态</a-select-option>
                  <a-select-option value="pending">待开始</a-select-option>
                  <a-select-option value="ongoing">进行中</a-select-option>
                  <a-select-option value="completed">已完成</a-select-option>
                  <a-select-option value="cancelled">已取消</a-select-option>
                </a-select>
              </a-col>
              <a-col :span="6">
                <a-select v-model:value="filterDepartment" placeholder="部门" style="width: 100%" allow-clear>
                  <a-select-option value="">全部部门</a-select-option>
                  <a-select-option v-for="dept in departments" :key="dept.id" :value="dept.id">
                    {{ dept.name }}
                  </a-select-option>
                </a-select>
              </a-col>
              <a-col :span="6">
                <a-input-search v-model:value="searchText" placeholder="搜索考核名称" @search="handleSearch" />
              </a-col>
            </a-row>
          </div>

          <!-- 考核列表 -->
          <div class="assessment-list">
            <div v-for="assessment in filteredAssessments" :key="assessment.id" class="assessment-item">
              <div class="assessment-header">
                <div class="assessment-info">
                  <h4 class="assessment-title">{{ assessment.title }}</h4>
                  <p class="assessment-period">{{ assessment.period }}</p>
                </div>
                <div class="assessment-status">
                  <a-tag :color="getStatusColor(assessment.status)">
                    {{ getStatusText(assessment.status) }}
                  </a-tag>
                </div>
              </div>

              <div class="assessment-progress">
                <a-row :gutter="16">
                  <a-col :span="12">
                    <div class="progress-item">
                      <span class="progress-label">完成进度</span>
                      <a-progress :percent="assessment.progress" size="small" />
                    </div>
                  </a-col>
                  <a-col :span="12">
                    <div class="progress-item">
                      <span class="progress-label">参与人数: {{ assessment.participants }}/{{ assessment.totalParticipants }}</span>
                    </div>
                  </a-col>
                </a-row>
              </div>

              <div class="assessment-stats">
                <a-row :gutter="16">
                  <a-col :span="6">
                    <div class="stat-item">
                      <div class="stat-number excellent">{{ assessment.excellentCount }}</div>
                      <div class="stat-label">优秀</div>
                    </div>
                  </a-col>
                  <a-col :span="6">
                    <div class="stat-item">
                      <div class="stat-number good">{{ assessment.goodCount }}</div>
                      <div class="stat-label">良好</div>
                    </div>
                  </a-col>
                  <a-col :span="6">
                    <div class="stat-item">
                      <div class="stat-number average">{{ assessment.averageCount }}</div>
                      <div class="stat-label">一般</div>
                    </div>
                  </a-col>
                  <a-col :span="6">
                    <div class="stat-item">
                      <div class="stat-number poor">{{ assessment.poorCount }}</div>
                      <div class="stat-label">较差</div>
                    </div>
                  </a-col>
                </a-row>
              </div>

              <div class="assessment-actions">
                <a-space>
                  <a-button type="link" size="small" @click="viewAssessmentDetail(assessment)">
                    <EyeOutlined />
                    查看详情
                  </a-button>
                  <a-button type="link" size="small" @click="manageParticipants(assessment)">
                    <TeamOutlined />
                    管理参与者
                  </a-button>
                  <a-button type="link" size="small" @click="viewResults(assessment)">
                    <BarChartOutlined />
                    考核结果
                  </a-button>
                  <a-button type="link" size="small" @click="editAssessment(assessment)">
                    <EditOutlined />
                    编辑
                  </a-button>
                </a-space>
              </div>
            </div>
          </div>
        </a-card>
      </a-col>

      <!-- 右侧：快捷操作 -->
      <a-col :xs="24" :lg="8">
        <a-space direction="vertical" size="large" style="width: 100%">
          <!-- 考核模板 -->
          <a-card title="考核模板" size="small" :bordered="false">
            <div class="template-list">
              <div v-for="template in assessmentTemplates" :key="template.id" class="template-item">
                <div class="template-info">
                  <h5 class="template-name">{{ template.name }}</h5>
                  <p class="template-description">{{ template.description }}</p>
                </div>
                <a-button type="link" size="small" @click="useTemplate(template)"> 使用 </a-button>
              </div>
            </div>
          </a-card>

          <!-- 最近评估 -->
          <a-card title="最近评估结果" size="small" :bordered="false">
            <div class="recent-assessments">
              <div v-for="result in recentResults" :key="result.id" class="result-item">
                <div class="result-info">
                  <h5 class="result-name">{{ result.officialName }}</h5>
                  <p class="result-position">{{ result.position }}</p>
                  <a-rate :value="result.rating" disabled size="small" />
                </div>
                <div class="result-score">
                  <span class="score-value">{{ result.score }}</span>
                  <span class="score-label">分</span>
                </div>
              </div>
            </div>
          </a-card>

          <!-- 考核统计图表 -->
          <a-card title="本期评级分布" size="small" :bordered="false">
            <div class="rating-chart">
              <div v-for="rating in ratingDistribution" :key="rating.level" class="rating-item">
                <div class="rating-info">
                  <span class="rating-label">{{ rating.label }}</span>
                  <span class="rating-count">{{ rating.count }}人</span>
                </div>
                <div class="rating-bar">
                  <div class="rating-progress" :class="rating.level" :style="{ width: rating.percentage + '%' }"></div>
                </div>
              </div>
            </div>
          </a-card>
        </a-space>
      </a-col>
    </a-row>

    <!-- 创建考核弹窗 -->
    <a-modal v-model:open="createAssessmentModalVisible" title="创建考核任务" @ok="handleCreateAssessment" @cancel="handleCreateAssessmentCancel" width="700px">
      <a-form ref="assessmentFormRef" :model="assessmentForm" :rules="assessmentRules" layout="vertical">
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="考核名称" name="title">
              <a-input v-model:value="assessmentForm.title" placeholder="请输入考核名称" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="考核周期" name="period">
              <a-select v-model:value="assessmentForm.period" placeholder="选择考核周期">
                <a-select-option value="2023-Q4">2023年第四季度</a-select-option>
                <a-select-option value="2024-Q1">2024年第一季度</a-select-option>
                <a-select-option value="2024-Q2">2024年第二季度</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>

        <a-form-item label="考核描述" name="description">
          <a-textarea v-model:value="assessmentForm.description" placeholder="描述考核的目的和要求" :rows="3" />
        </a-form-item>

        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="开始时间" name="startDate">
              <a-date-picker v-model:value="assessmentForm.startDate" style="width: 100%" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="结束时间" name="endDate">
              <a-date-picker v-model:value="assessmentForm.endDate" style="width: 100%" />
            </a-form-item>
          </a-col>
        </a-row>

        <a-form-item label="参与部门" name="departments">
          <a-checkbox-group v-model:value="assessmentForm.departments">
            <a-row>
              <a-col :span="12" v-for="dept in departments" :key="dept.id">
                <a-checkbox :value="dept.id">{{ dept.name }}</a-checkbox>
              </a-col>
            </a-row>
          </a-checkbox-group>
        </a-form-item>

        <a-form-item label="考核指标" name="criteria">
          <div class="criteria-list">
            <div v-for="(criterion, index) in assessmentForm.criteria" :key="index" class="criterion-item">
              <a-row :gutter="8">
                <a-col :span="8">
                  <a-input v-model:value="criterion.name" placeholder="指标名称" />
                </a-col>
                <a-col :span="4">
                  <a-input-number v-model:value="criterion.weight" :min="0" :max="100" placeholder="权重%" />
                </a-col>
                <a-col :span="10">
                  <a-input v-model:value="criterion.description" placeholder="指标描述" />
                </a-col>
                <a-col :span="2">
                  <a-button type="text" danger @click="removeCriterion(index)">
                    <DeleteOutlined />
                  </a-button>
                </a-col>
              </a-row>
            </div>
            <a-button type="dashed" @click="addCriterion" style="width: 100%; margin-top: 8px">
              <PlusOutlined />
              添加考核指标
            </a-button>
          </div>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { message } from 'ant-design-vue'
import {
  HomeOutlined,
  ApartmentOutlined,
  CrownOutlined,
  StarOutlined,
  UserOutlined,
  ClockCircleOutlined,
  CheckCircleOutlined,
  PlusOutlined,
  ExportOutlined,
  EyeOutlined,
  TeamOutlined,
  BarChartOutlined,
  EditOutlined,
  DeleteOutlined
} from '@ant-design/icons-vue'

// 响应式数据
const searchText = ref('')
const filterPeriod = ref('')
const filterStatus = ref('')
const filterDepartment = ref('')
const createAssessmentModalVisible = ref(false)
const assessmentFormRef = ref()

// 考核统计
const assessmentStats = reactive({
  currentAssessments: 156,
  excellentRate: 89,
  ongoingAssessments: 12,
  completedAssessments: 144
})

// 部门数据
const departments = ref([
  { id: 'first_court', name: '第一殿秦广王府' },
  { id: 'second_court', name: '第二殿楚江王府' },
  { id: 'third_court', name: '第三殿宋帝王府' },
  { id: 'fourth_court', name: '第四殿五官王府' },
  { id: 'fifth_court', name: '第五殿阎罗王府' }
])

// 考核数据
const assessments = ref([
  {
    id: 1,
    title: '2023年第四季度绩效考核',
    period: '2023-Q4',
    status: 'ongoing',
    progress: 75,
    participants: 120,
    totalParticipants: 160,
    excellentCount: 45,
    goodCount: 38,
    averageCount: 25,
    poorCount: 12,
    startDate: '2023-10-01',
    endDate: '2023-12-31'
  },
  {
    id: 2,
    title: '新仙官入职考核',
    period: '2023-Q4',
    status: 'completed',
    progress: 100,
    participants: 25,
    totalParticipants: 25,
    excellentCount: 12,
    goodCount: 8,
    averageCount: 4,
    poorCount: 1,
    startDate: '2023-11-01',
    endDate: '2023-11-30'
  },
  {
    id: 3,
    title: '年度优秀仙官评选',
    period: '2023-Annual',
    status: 'pending',
    progress: 0,
    participants: 0,
    totalParticipants: 200,
    excellentCount: 0,
    goodCount: 0,
    averageCount: 0,
    poorCount: 0,
    startDate: '2024-01-01',
    endDate: '2024-01-31'
  }
])

// 考核模板
const assessmentTemplates = ref([
  {
    id: 1,
    name: '季度绩效考核',
    description: '标准季度考核模板，包含工作能力、工作态度等指标'
  },
  {
    id: 2,
    name: '新员工考核',
    description: '针对新入职仙官的考核模板'
  },
  {
    id: 3,
    name: '晋升考核',
    description: '职位晋升专用考核模板'
  }
])

// 最近评估结果
const recentResults = ref([
  {
    id: 1,
    officialName: '秦广王',
    position: '第一殿主审',
    rating: 5,
    score: 95
  },
  {
    id: 2,
    officialName: '判官李明',
    position: '主审判官',
    rating: 4,
    score: 88
  },
  {
    id: 3,
    officialName: '文书张华',
    position: '高级文书',
    rating: 4,
    score: 82
  }
])

// 评级分布
const ratingDistribution = ref([
  { level: 'excellent', label: '优秀', count: 45, percentage: 90 },
  { level: 'good', label: '良好', count: 38, percentage: 76 },
  { level: 'average', label: '一般', count: 25, percentage: 50 },
  { level: 'poor', label: '较差', count: 12, percentage: 24 }
])

// 表单数据
const assessmentForm = reactive({
  title: '',
  period: '',
  description: '',
  startDate: null,
  endDate: null,
  departments: [],
  criteria: [
    { name: '工作能力', weight: 30, description: '专业技能和工作效率' },
    { name: '工作态度', weight: 25, description: '责任心和积极性' },
    { name: '团队协作', weight: 20, description: '团队合作和沟通能力' },
    { name: '学习能力', weight: 15, description: '持续学习和成长' },
    { name: '纪律性', weight: 10, description: '遵守规章制度' }
  ]
})

// 表单验证规则
const assessmentRules = {
  title: [{ required: true, message: '请输入考核名称', trigger: 'blur' }],
  period: [{ required: true, message: '请选择考核周期', trigger: 'change' }],
  description: [{ required: true, message: '请输入考核描述', trigger: 'blur' }],
  startDate: [{ required: true, message: '请选择开始时间', trigger: 'change' }],
  endDate: [{ required: true, message: '请选择结束时间', trigger: 'change' }],
  departments: [{ required: true, message: '请选择参与部门', trigger: 'change' }]
}

// 计算属性
const filteredAssessments = computed(() => {
  let result = assessments.value

  if (filterPeriod.value) {
    result = result.filter((assessment) => assessment.period === filterPeriod.value)
  }

  if (filterStatus.value) {
    result = result.filter((assessment) => assessment.status === filterStatus.value)
  }

  if (searchText.value) {
    result = result.filter((assessment) => assessment.title.toLowerCase().includes(searchText.value.toLowerCase()))
  }

  return result
})

// 方法
const getStatusColor = (status) => {
  const colors = {
    pending: 'orange',
    ongoing: 'blue',
    completed: 'green',
    cancelled: 'red'
  }
  return colors[status] || 'default'
}

const getStatusText = (status) => {
  const texts = {
    pending: '待开始',
    ongoing: '进行中',
    completed: '已完成',
    cancelled: '已取消'
  }
  return texts[status] || status
}

const showCreateAssessmentModal = () => {
  createAssessmentModalVisible.value = true
}

const handleCreateAssessment = async () => {
  try {
    await assessmentFormRef.value.validate()

    const newAssessment = {
      id: Date.now(),
      ...assessmentForm,
      status: 'pending',
      progress: 0,
      participants: 0,
      totalParticipants: 100, // 默认值
      excellentCount: 0,
      goodCount: 0,
      averageCount: 0,
      poorCount: 0
    }

    assessments.value.push(newAssessment)
    message.success('考核任务创建成功')
    createAssessmentModalVisible.value = false
  } catch (error) {
    console.error('表单验证失败:', error)
  }
}

const handleCreateAssessmentCancel = () => {
  createAssessmentModalVisible.value = false
}

const addCriterion = () => {
  assessmentForm.criteria.push({
    name: '',
    weight: 0,
    description: ''
  })
}

const removeCriterion = (index) => {
  assessmentForm.criteria.splice(index, 1)
}

const viewAssessmentDetail = (assessment) => {
  message.info(`查看考核详情: ${assessment.title}`)
}

const manageParticipants = (assessment) => {
  message.info(`管理参与者: ${assessment.title}`)
}

const viewResults = (assessment) => {
  message.info(`查看考核结果: ${assessment.title}`)
}

const editAssessment = (assessment) => {
  message.info(`编辑考核: ${assessment.title}`)
}

const useTemplate = (template) => {
  message.info(`使用模板: ${template.name}`)
}

const handleSearch = () => {
  // 搜索逻辑已在计算属性中处理
}

const exportAssessments = () => {
  message.info('考核数据导出功能开发中...')
}

onMounted(() => {
  // 页面加载时的初始化逻辑
})
</script>

<style lang="scss" scoped>
.assessment-system-container {
  padding: 24px;

  // 页面头部
  .assessment-header {
    text-align: center;
    margin-bottom: 32px;

    .header-content {
      .ancient-title {
        font-size: 32px;
        font-weight: bold;
        color: $secondary-color;
        margin-bottom: 8px;
        text-shadow: 0 0 20px rgba(212, 153, 10, 0.3);
      }

      .header-subtitle {
        font-size: 16px;
        color: $text-secondary;
        letter-spacing: 2px;
      }
    }

    .header-decoration {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 24px;
      gap: 16px;

      .decoration-line {
        width: 80px;
        height: 1px;
        background: linear-gradient(90deg, transparent, $secondary-color, transparent);
      }

      .decoration-symbol {
        font-size: 20px;
        color: $secondary-color;
        font-weight: bold;
      }
    }
  }

  // 路由信息
  .route-info {
    margin-bottom: 24px;
    padding: 12px 16px;
    border-radius: 8px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(212, 153, 10, 0.2);
  }

  // 统计卡片区域
  .stats-section {
    margin-bottom: 32px;

    .stat-card {
      border-radius: 12px;
      padding: 24px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
      border: 1px solid rgba(212, 153, 10, 0.2);
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      gap: 16px;

      .stat-icon {
        width: 56px;
        height: 56px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        color: white;
      }

      .stat-content {
        flex: 1;

        .stat-title {
          font-size: 14px;
          color: $text-secondary;
          margin-bottom: 4px;
        }

        .stat-value {
          font-size: 28px;
          font-weight: bold;
          color: $primary-color;
          margin-bottom: 4px;
        }

        .stat-label {
          font-size: 12px;
          color: $text-secondary;
        }
      }

      &.primary-stat .stat-icon {
        background: linear-gradient(135deg, #1890ff, #40a9ff);
      }

      &.judgment-stat .stat-icon {
        background: linear-gradient(135deg, #52c41a, #73d13d);
      }

      &.pending-stat .stat-icon {
        background: linear-gradient(135deg, #fa8c16, #ffa940);
      }

      &.online-stat .stat-icon {
        background: linear-gradient(135deg, #722ed1, #9254de);
      }
    }
  }

  // 筛选栏
  .filter-bar {
    margin-bottom: 20px;
    padding: 16px;
    border-radius: 8px;
    border: 1px solid rgba(212, 153, 10, 0.2);
  }

  // 考核列表
  .assessment-list {
    .assessment-item {
      margin-bottom: 16px;
      padding: 20px;
      border: 1px solid rgba(212, 153, 10, 0.2);
      border-radius: 8px;
      transition: all 0.3s ease;

      &:hover {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      }

      .assessment-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 16px;

        .assessment-info {
          .assessment-title {
            margin: 0 0 4px 0;
            color: $primary-color;
            font-size: 18px;
            font-weight: bold;
          }

          .assessment-period {
            margin: 0;
            color: $text-secondary;
            font-size: 14px;
          }
        }
      }

      .assessment-progress {
        margin-bottom: 16px;

        .progress-item {
          .progress-label {
            font-size: 14px;
            color: $text-secondary;
            margin-bottom: 8px;
            display: block;
          }
        }
      }

      .assessment-stats {
        margin-bottom: 16px;

        .stat-item {
          text-align: center;

          .stat-number {
            font-size: 20px;
            font-weight: bold;
            margin-bottom: 4px;

            &.excellent {
              color: #52c41a;
            }
            &.good {
              color: #1890ff;
            }
            &.average {
              color: #fa8c16;
            }
            &.poor {
              color: #ff4d4f;
            }
          }

          .stat-label {
            font-size: 12px;
            color: $text-secondary;
          }
        }
      }

      .assessment-actions {
        text-align: right;
      }
    }
  }

  // 模板列表
  .template-list {
    .template-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 12px 0;
      border-bottom: 1px solid rgba(212, 153, 10, 0.1);

      &:last-child {
        border-bottom: none;
      }

      .template-info {
        flex: 1;

        .template-name {
          margin: 0 0 4px 0;
          color: $primary-color;
          font-size: 14px;
          font-weight: bold;
        }

        .template-description {
          margin: 0;
          color: $text-secondary;
          font-size: 12px;
        }
      }
    }
  }

  // 最近评估结果
  .recent-assessments {
    .result-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 12px 0;
      border-bottom: 1px solid rgba(212, 153, 10, 0.1);

      &:last-child {
        border-bottom: none;
      }

      .result-info {
        flex: 1;

        .result-name {
          margin: 0 0 4px 0;
          color: $primary-color;
          font-size: 14px;
          font-weight: bold;
        }

        .result-position {
          margin: 0 0 8px 0;
          color: $text-secondary;
          font-size: 12px;
        }
      }

      .result-score {
        text-align: center;

        .score-value {
          font-size: 18px;
          font-weight: bold;
          color: $secondary-color;
        }

        .score-label {
          font-size: 12px;
          color: $text-secondary;
        }
      }
    }
  }

  // 评级分布图表
  .rating-chart {
    .rating-item {
      margin-bottom: 12px;

      .rating-info {
        display: flex;
        justify-content: space-between;
        margin-bottom: 4px;

        .rating-label {
          font-size: 14px;
          color: $text-primary;
        }

        .rating-count {
          font-size: 14px;
          color: $text-secondary;
        }
      }

      .rating-bar {
        height: 8px;
        background: #f0f0f0;
        border-radius: 4px;
        overflow: hidden;

        .rating-progress {
          height: 100%;
          transition: width 0.3s ease;

          &.excellent {
            background: #52c41a;
          }
          &.good {
            background: #1890ff;
          }
          &.average {
            background: #fa8c16;
          }
          &.poor {
            background: #ff4d4f;
          }
        }
      }
    }
  }

  // 考核指标列表
  .criteria-list {
    .criterion-item {
      margin-bottom: 8px;
    }
  }

  // Card样式覆盖
  :deep(.ant-card) {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(212, 153, 10, 0.2);
    border-radius: 12px;
  }

  :deep(.ant-card-head) {
    border-bottom: 1px solid rgba(212, 153, 10, 0.2);
  }
}
</style>
